<template>
<cc-dialog ref="showDialog" title="生成配置" @submit="submit">

            <div class="col-12">
              <h5><q-icon name="star" color="red"/> 模块名称：</h5>
              <q-input outlined dense v-model="form.moduleName"
                :rules="[v=>!!v||'不可以为空']"/>
            </div>
            <div class="col-12">
              <h5><q-icon name="star" color="red"/> 类名（首字母大写）：</h5>
              <q-input outlined dense autogrow v-model="form.className"
                :rules="[v=>!!v||'不可以为空']"/>
            </div>
            <div class="col-12">
              <h5><q-icon name="star" color="red"/> 包名（cc.admin.modules.）：</h5>
              <q-input outlined dense autogrow v-model="form.packageName"
                :rules="[v=>!!v||'不可以为空']"/>
            </div>
            <div class="col-12">
              <h5><q-icon name="star" color="red"/> js路径：</h5>
              <q-input outlined dense autogrow v-model="form.jsPath"
                :rules="[v=>!!v||'不可以为空']"/>
            </div>

    </cc-dialog>
</template>

<script>

export default {
  name: 'table-select',
  props: {
    fieldData: Object,
  },
  components: {},
  data() {
    return {
      options: [{
        value: 'demo1',
        label: 'demo1',
      }, {
        value: 'demo2',
        label: 'demo2',
      }, {
        value: 'demo3',
        label: 'demo3',
      }],
      form: {
        id: '',
        moduleName: '',
        className: '',
        packageName: '',
        jsPath: '',
      },
      loading: false,
      showDialog: false,
    };
  },
  methods: {
    changeName() {
    },
    submit() {
      this.loading = true;
      this.$axios.put('/generate/doGenerateCode', this.form)
        .then((res) => {
          if (res.success) {
            this.$emit('syncTableByName', this.data);
            this.$info('保存成功');
            this.$refs.showDialog.hide();
          } else {
            this.$error('保存失败');
          }
        }).finally(() => {
          this.loading = false;
        });
    },
    show(id) {
      this.id = id;
      this.query();
      this.$refs.showDialog.show();
    },
    query() {
      this.loading = true;
      this.$axios.get(`/generate/queryById?id=${this.id}`)
        .then(({ result }) => {
          const contentObj = JSON.parse(result.content);
          const { config } = contentObj;
          if (config) {
            this.form = config;
            this.form.id = this.id;
          } else {
            const tableName = result.name;
            this.form = {
              id: this.id,
              moduleName: result.description,
              className: this.getClassName(tableName),
              packageName: this.getPackageName(tableName),
              jsPath: this.getJsPath(tableName),
            };
          }
        }).finally(() => {
          this.loading = false;
        });
    },
    getClassName(tableName) {
      tableName = tableName.substring(0, 1).toUpperCase() + tableName.substring(1);
      return tableName.replace(/_(\w)/g, (all, letter) => letter.toUpperCase());
    },
    getPackageName(tableName) {
      return tableName.split('_')[0];
    },
    getJsPath(tableName) {
      return tableName.split('_').join('/');
    },

  },
  mounted() {
  },
};
</script>
<style>
</style>
